<template>
	<div>
		<div class="title padding">目录</div>

		<u-collapse>
			<u-collapse-item
				:title="item.chapterName"
				name="Docs"
				v-for="(item, index) in message.chapterList"
				:key="index"
			>
				<div
					class="coll"
					v-for="(items, indexs) in item.coursewares"
					:key="indexs"
					@click="toLearn(item, items)"
				>
					<div class="coll-title">
						<u-icon
							class="icon"
							v-if="items.coursewareType == 1"
							name="file-text-fill"
							size="45rpx"
						></u-icon>
						<u-icon
							class="icon"
							v-else-if="items.coursewareType == 2"
							name="photo-fill"
							size="45rpx"
						></u-icon>
						<u-icon
							class="icon"
							v-else-if="items.coursewareType == 3"
							name="play-circle-fill"
							size="45rpx"
						></u-icon>
						<div class="name">
							{{ items.coursewareName }}
						</div>
						<div
							class="end"
							:class="[
								{
									isEnd: items.studyStatus == 3,
								},
							]"
							v-if="items.studyStatus"
						>
							<template v-if="items.studyStatus == 1">未开始</template>
							<template v-else-if="items.studyStatus == 2">进行中</template>
							<template v-else-if="items.studyStatus == 3">已完成</template>
						</div>
					</div>
					<!-- <div class="coll-time">4分钟22秒 / 15分钟</div> -->
				</div>
			</u-collapse-item>
		</u-collapse>
		<v-modal ref="vModalRef">
			<div style="text-align: center">是否开始学习?</div>
		</v-modal>
	</div>
</template>

<script>
import mixins from "@/mixins"
export default {
	name: "learm-catalog",
	mixins: [mixins],
	props: {
		message: {
			type: Object,
			default: () => ({}),
		},
	},
	data() {
		return {}
	},
	computed: {},
	methods: {
		toLearn(item, items) {
			if (!this.isLogin) {
				this.showMessage.modal({
					title: "提示",
					content: "请先登录",
					confirm: next => {
						this.toPage("/pages/login/index")
						next()
					},
				})
				return
			}
			if (this.message.isBind) {
				this.toPage("/pages/learn/content", {
					courseId: this.message.id,
					chapterId: items.chapterId,
					coursewareId: items.id,
				})
				return
			}

			this.$refs.vModalRef.show({
				title: "提示",
				content: "是否开始学习?",
				confirm: async (next, cancel) => {
					try {
						await this.$axios.post("/api/study/course/studyCourseLog/save", {
							courseId: this.message.id,
						})
						next()
						this.toPage("/pages/learn/content", {
							courseId: this.message.id,
							chapterId: items.chapterId,
							coursewareId: items.id,
						})
					} catch (error) {
						cancel()
						this.showMessage.error(error)
					}
				},
			})
		},
	},
}
</script>

<style lang="scss" scoped>
@import "./details.scss";

.coll {
	padding-bottom: 15rpx;
}
.coll-title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.icon {
		flex: none;
	}
	.name {
		font-size: 28rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		padding-left: 15rpx;
	}
	.end {
		color: $primary;
		font-size: 24rpx;
		margin-left: auto;
		display: inline-block;
		white-space: nowrap;
		&.isEnd {
			color: #ffad01;
		}
	}
}
.coll-time {
	padding-left: 56rpx;
	color: #818181;
	font-size: 28rpx;
	padding-top: 10rpx;
}
</style>
